import styles from './RecentlyBrowsed.module.scss'
import { getCustomePproductsList } from '@/api/customer/manage/list'
import { useRoute } from 'vue-router'
import { defineComponent, onMounted, reactive } from 'vue'
import { ElImage, ElIcon } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'RecentlyBrowsed',
  setup(props, { emit, slots }) {
    const route = useRoute()
    const state = reactive({
      list: []
    })
    onMounted(async () => {
      const res = await getCustomePproductsList({ cust_id: route.query.id })
      console.log('最近浏览', res)
      state.list = res || []
    })
    const toH5Url = (item: any) => {
      item.exist_h5_url && window.open(item.h5_url)
    }
    return () => (
      <div class={styles.recently_browsed}>
        <div class={styles.title}>最近浏览商品</div>
        <el-scrollbar max-height="400px" class={styles.scrollbar}>
          {state.list.length ? (
            state.list.map((item) => (
              <div class={styles.item}>
                <ElImage
                  class={styles.product_img}
                  src={item.product_img}
                  previewSrcList={[item.product_img]}
                  previewTeleported={true}
                  fit="contain"
                  vSlots={{
                    error: () => (
                      <ElIcon class={styles.product_img}>
                        <IconPicture />
                      </ElIcon>
                    )
                  }}
                />
                <div class={styles.right}>
                  <div class={item.exist_h5_url ? styles.to_h5_url : styles.product_name} onClick={() => toH5Url(item)}>
                    {item.product_name}
                  </div>
                  <div class={styles.bottom_box}>
                    <div class={styles.bottom_left}>
                      <ElImage
                        class={styles.dianpu_pic}
                        src={item.shop_img}
                        fit="contain"
                        vSlots={{
                          error: () => (
                            <ElIcon class={styles.dianpu_pic}>
                              <IconPicture />
                            </ElIcon>
                          )
                        }}
                      />
                      <div class={styles.dianpu_name}>{item.shop_type}</div>
                    </div>
                    {/* <ElButton plain size="small" vSlots={{ default: () => '提醒员工' }} /> */}
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div class={styles.empty}>暂无数据</div>
          )}
        </el-scrollbar>
      </div>
    )
  }
})
